<template>
	<view class="container reservation-list-container">
		<view class="page-top">
			<view class="page-top-btn" :class="pageType==='0'&&'page-top-active'" @click="pageTypeChange('0')">待确认
			</view>
			<view class="page-top-btn" :class="pageType==='1'&&'page-top-active'" @click="pageTypeChange('1')">已确认
			</view>
			<view class="page-top-btn" :class="pageType==='2'&&'page-top-active'" @click="pageTypeChange('2')">已取消
			</view>
		</view>
		<view class="page-filter yuan-form">
			<view class="yuan-form-list">
				<picker class="yuan-form-picker" mode="date" @change="bindMonthDateChange">
					<view class="yuan-picker-row">
						<template v-if="monthDate">
							<view class="yuan-input" v-if="monthDate">{{monthDate}}</view>
							<text class="iconfont" @click.stop="cleanDate">&#xe609;</text>
						</template>
						<template v-else>
							<view class="placeholder-style">按日期筛选</view>
							<text class="iconfont">&#xe775;</text>
						</template>
					</view>
				</picker>

			</view>
		</view>
		<view class="page-main">
			<view class="page-list" v-for="item in pageList" :key="item.id">
				<view class="list-top">
					<image class="list-img" :src="item.headPortrait" mode="widthFix" @error="$handleImageError(item,'headPortrait')"></image>
					<view>
						<view class="list-content">{{item.content || '-'}}</view>
						<view class="list-item">
							<text class="list-title">用户名称</text>
							<text class="list-info">{{item.patientName}}</text>
						</view>
						<view class="list-item">
							<text class="list-title">性别</text>
							<text class="list-info">{{item.patientGender===1?'男':'女'}}</text>
						</view>
						<view class="list-item">
							<text class="list-title">联系电话</text>
							<text class="list-info" @click="callPhone(item.contactPhone)">
								{{item.contactPhone}}
								<text class="iconfont c-success">&#xe61b;</text>
							</text>
						</view>
						<view class="list-item">
							<text class="list-title">预约时间</text>
							<text class="list-info">{{item.appointmentDate}} {{item.appointmentTime}}</text>
						</view>
					</view>
				</view>
				<view class="list-bottom" v-if="item.status===0">
					<view class="yuan-btn btn-default" @click="clickCancel(item)">取消预约</view>
					<view class="yuan-btn btn-primary" @click="clickPass(item)">确认预约</view>
				</view>


			</view>
			<view class="not-more" v-if="isLoading">加载中...</view>
			<view class="null-page" v-else-if="pageList.length<=0 ">
				<text class="iconfont">&#xe642;</text>
				<view class="null-page-tips">暂无数据~</view>
			</view>
			<view class="not-more" v-else-if="notMore">没有更多了...</view>
		</view>

		<view class="other-panel" :class="showSizePanel&&'other-panel-show'">
			<view class="other-main" :class="showSizePanel&&'other-main-show'">
				<view>
					<view class="coupon-top">输入取消预约原因：</view>
					<view class="yuan-form">
						<textarea class="yuan-textarea" v-model="cancelInfo" placeholder="请输入取消原因"
							placeholder-class="placeholder-style"></textarea>
						<view class="textarea-number">{{cancelInfo?cancelInfo.length:0}}/220</view>


					</view>
				</view>
				<view class="other-bottom">
					<view class="yuan-btn btn-default sure-btn" style="margin-right: 50rpx;" @click="clickClose">取消
					</view>
					<view class="yuan-btn btn-primary sure-btn" @click="clickSureCancel">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script lang="ts" setup>
	import { onMounted, ref } from 'vue';
	import { hideLoading, showLoading, showToast } from '../../common/util';
	import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
	import userApi from '../../common/userApi';
	const cancelInfo = ref('')
	const monthDate = ref('')
	const isLoading = ref(false)
	const notMore = ref(true)
	const pageSize = 10
	let pageNum = 1
	const pageList = ref([])
	onMounted(async () => {
		await getPageList()
	})

	const loadMore = () => {
		if (isLoading.value) return
		if (notMore.value) return
		pageNum = pageNum + 1
		getPageList()
	}
	const refreshList = () => {
		notMore.value = false
		pageNum = 1
		pageList.value = []
		getPageList()
	}
	onReachBottom(() => {
		loadMore()
	})
	onPullDownRefresh(() => {
		refreshList()
		uni.stopPullDownRefresh()
	})
	const getPageList = async () => {
		showLoading()
		isLoading.value = true
		try {
			const params = {
				pageNum,
				pageSize,
				status: pageType.value,
				appointmentDate:monthDate.value
			}
			const res = await userApi.getAppointments(params)
			const rows = res.data?.records || []
			if (rows.length < pageSize) notMore.value = true
			pageList.value = pageList.value.concat(rows)
		} finally {
			isLoading.value = false
			hideLoading()
		}
	}
	const pageType = ref('0')
	const pageTypeChange = (type : string) => {
		if (pageType.value === type) return
		pageType.value = type
		refreshList()
	}
	const bindMonthDateChange = (e : any) => {
		monthDate.value = e.detail.value
		refreshList()
	}
	const cleanDate = () => {
		monthDate.value = ""
		refreshList()
	}
	let cancelItem:any={}
	const clickCancel = (item) => {
		cancelItem=item
		cancelInfo.value=''
		showSizePanel.value = true
	}

	const clickClose = () => {
		showSizePanel.value = false

	}
	const clickSureCancel = async () => {
		if(cancelInfo.value===''){
			showToast('请输入取消的原因');
			return
		}
		showLoading()
		try {
			await userApi.cancelAppointments({
				reason:cancelInfo.value,
				id:cancelItem.id
			})
			showSizePanel.value = false
			showToast('取消成功', {}, () => {
				refreshList()
			})
		} finally {
			hideLoading()
		}
		
	}
	const clickPass = (item) => {
		uni.showModal({
			title: '温馨提示',
			content: '你确定要接受该预约吗？',
			success:async (res) => {
				if (res.confirm) {
					showLoading()
					try {
						await userApi.sureAppointments(item.id)
						showToast('确认成功', {}, () => {
							refreshList()
						})
					} finally {
						hideLoading()
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}

	const showSizePanel = ref(false)
	
	const callPhone=(num)=>{
		wx.makePhoneCall({
		  phoneNumber: num
		})
	}
</script>


<style lang="scss">
	.reservation-list-container {
		background: linear-gradient(180deg, #DAFBFB 0%, #D7E5FF 8%, #F2F3F8 40%, #F2F3F8 100%);
		padding-bottom: 120rpx;
		.yuan-form-list{
			border-bottom: unset;
		}
		.page-top-btn {
			background-color: #F5F6FA;
			width: 33.3%;
			display: inline-block;
			text-align: center;
			height: 88rpx;
			line-height: 88rpx;
			color: #6D6D6D;
			font-size: 30rpx;
			font-weight: bold;
			position: relative;
		}

		.page-top-active {
			background-color: #fff;
			color: #080808;
		}

		.page-top-active::after {
			content: '';
			width: 80rpx;
			height: 8rpx;
			background-color: #3AD3C1;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			border-radius: 4rpx;
		}

		.page-filter {
			padding: 0 30rpx;
		}

		.page-main {
			padding: 0 30rpx;
		}

		.page-list {
			margin-bottom: 20rpx;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;
			box-shadow: 0 0 10rpx 0 rgba(0,0,0,0.2);
		}

		.yuan-picker-row {
			.iconfont {
				font-size: 30rpx;
				padding: 10rpx;
				margin-left: 0;
			}
		}

		.list-top {
			display: flex;
			padding-bottom: 20rpx;
		}

		.list-img {
			width: 140rpx;
			height: 140rpx;
			margin-right: 15rpx;
			flex-shrink: 0;
		}

		.list-content {
			font-weight: bold;
			font-size: 32rpx;
			color: #202020;
		}

		.list-item {
			font-size: 28rpx;
			margin-top: 20rpx;
		}

		.list-title {
			color: #6D6D6D;
			margin-right: 15rpx;
		}

		.list-info {
			color: #222222;

			.iconfont {
				font-size: 26rpx;
				margin-left: 10rpx;
			}
		}

		.list-bottom {
			padding-top: 20rpx;
			display: flex;
			align-items: center;
			margin-top: 5rpx;
			border-top: solid 1px #eee;
			justify-content: flex-end;

			.yuan-btn {
				width: 150rpx;
				height: 60rpx;
				border-radius: 60rpx;
				margin-left: 10rpx;
			}
		}


		.other-panel {
			position: fixed;
			z-index: 99;
			background-color: rgba(0, 0, 0, 0.3);
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			transform: translateY(100%);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.other-panel-show {
			transform: translateY(0);
		}

		.other-main {
			background-color: #fff;
			border-radius: 15rpx;
			width: 90%;
			padding: 0 20rpx 50rpx 20rpx;
			transform: translateY(100%);
			transition: all 0.3s;
		}

		.other-main-show {
			transform: translateY(0);
		}

		.other-bottom {
			margin-top: 30rpx;
			text-align: center;

			.sure-btn {
				display: inline-flex;
				width: 200rpx;
				height: 70rpx;
				border-radius: 70rpx;
			}
		}

		.coupon-top {
			font-weight: bold;
			font-size: 32rpx;
			color: #202020;
			padding: 20rpx 0;
		}

		.textarea-number {
			font-size: 24rpx;
			color: #999;
			text-align: right;
		}
	}
</style>